<template>
  <div>
    <a-dropdown>
      <a class="ant-dropdown-link" @click.prevent>
        <SignalFilled :style="{ cursor: 'pointer', fontSize: '20px', color: '#fff' }" />
      </a>
      <template #overlay>
        <a-menu @click="menuClick">
          <a-menu-item class="head-menu-item" key="traffic">
            <span class="icon iconfont iconfont-0">&#xe60e;</span>
            <div class="menu-title">流向统计</div>
          </a-menu-item>
          <a-menu-item class="head-menu-item" key="event">
            <span class="icon iconfont iconfont-2">&#xe62d;</span>
            <div class="menu-title">事件统计</div>
          </a-menu-item>
          <!-- <a-menu-item class="head-menu-item" key="alarm">
            <span class="icon iconfont iconfont-5">&#xe871;</span>
            <div class="menu-title">报警统计</div>
          </a-menu-item> -->
        </a-menu>
      </template>
    </a-dropdown>
    <a-dropdown v-if="!jtoken && containsMenu('bus')">
      <a class="ant-dropdown-link" @click.prevent>
        <SettingFilled :style="{ cursor: 'pointer', fontSize: '20px', color: '#fff' }" />
      </a>
      <template #overlay>
        <a-menu @click="menuClick">
          <a-menu-item class="head-menu-item" key="bridge" v-if="containsMenu('bridge')">
            <span class="icon iconfont iconfont-0">&#xe668;</span>
            <div class="menu-title">桥梁配置</div>
          </a-menu-item>
          <a-menu-item class="head-menu-item" key="radar" v-if="containsMenu('radar')">
            <span class="icon iconfont iconfont-1">&#xe600;</span>
            <div class="menu-title">雷达配置</div>
          </a-menu-item>
          <a-menu-item class="head-menu-item" key="camera" v-if="containsMenu('camera')">
            <span class="icon iconfont iconfont-3">&#xe629;</span>
            <div class="menu-title">摄像头配置</div>
          </a-menu-item>
          <a-menu-item class="head-menu-item" key="ais" v-if="containsMenu('ais')">
            <span class="icon iconfont iconfont-2">&#xe61f;</span>
            <div class="menu-title">AIS配置</div>
          </a-menu-item>
          <a-menu-item class="head-menu-item" key="water" v-if="containsMenu('water')">
            <span class="icon iconfont iconfont-6">&#xe613;</span>
            <div class="menu-title">水位计配置</div>
          </a-menu-item>
          <a-menu-item class="head-menu-item" key="area" v-if="containsMenu('area')">
            <span class="icon iconfont iconfont-4">&#xe683;</span>
            <div class="menu-title">区域配置</div>
          </a-menu-item>
          <a-menu-item class="head-menu-item" key="strategy" v-if="containsMenu('strategy')">
            <span class="icon iconfont iconfont-5">&#xe61e;</span>
            <div class="menu-title">策略配置</div>
          </a-menu-item>
          <a-menu-item class="head-menu-item" key="ship" v-if="containsMenu('ship')">
            <span class="icon iconfont iconfont-6">&#xe639;</span>
            <div class="menu-title">船舶配置</div>
          </a-menu-item>
          <a-menu-item class="head-menu-item" key="trafficConfig" v-if="containsMenu('trafficConfig')">
            <span class="icon iconfont iconfont-1">&#xe60d;</span>
            <div class="menu-title">流量统计配置</div>
          </a-menu-item>
          <a-menu-item class="head-menu-item" key="archives" v-if="containsMenu('archives')">
            <span class="icon iconfont iconfont-7">&#xe62d;</span>
            <div class="menu-title">归档配置</div>
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
    <a-dropdown v-if="!jtoken">
      <a class="ant-dropdown-link" @click.prevent>
        <UserOutlined :style="{ cursor: 'pointer', fontSize: '20px', color: '#fff' }" />
      </a>
      <template #overlay>
        <a-menu @click="systemClick">
          <a-menu-item class="head-menu-item" key="system">
            <span class="icon iconfont iconfont-1">&#xe62e;</span>
            <div class="menu-title">后台管理</div>
          </a-menu-item>
          <a-menu-item class="head-menu-item" key="logout">
            <span class="icon iconfont iconfont-1">&#xe89c;</span>
            <div class="menu-title">退出登录</div>
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </div>
</template>
<script setup>
  import { localClear, localRead } from '/@/utils/local-util.js';
  import { useRouter } from 'vue-router';
  import LocalStorageKeyConst from '/@/constants/local-storage-key-const.js';
  import { computed } from 'vue';
  import { useUserStore } from '/@/store/modules/system/user';

  const emit = defineEmits(['menuSelect']);
  const router = useRouter();
  function menuClick(val) {
    emit('menuSelect', val.key);
  }

  const menuTree = computed(() => useUserStore().menuPermission || []);

  function systemClick(val) {
    switch (val.key) {
      case 'logout':
        localClear();
        router.push('/login');
        break;
      case 'system':
        window.open('/');
        break;
      default:
        break;
    }
  }

  // 验证登录
  const jtoken = localRead(LocalStorageKeyConst.j_TOKEN);

  function containsMenu(val) {
    return menuTree.value.some((m) => m.path === val);
  }
</script>

<style lang="less">
  .ant-dropdown-link {
    margin-left: 15px;
  }
  .head-menu-item {
    padding: 0 5px;
    .ant-dropdown-menu-title-content {
      display: flex !important;
      align-items: center !important;
      .menu-title {
        font-size: 14px;
        margin-left: 5px;
      }
      .iconfont-0 {
        color: #709741;
      }
      .iconfont-1 {
        color: #399cbf;
      }
      .iconfont-2 {
        color: #08ab2f;
      }
      .iconfont-3 {
        color: #57e66e;
      }
      .iconfont-4 {
        color: #6f8e2f;
      }
      .iconfont-5 {
        color: #ca2508;
      }
      .iconfont-6 {
        color: #00a0ff;
      }
      .iconfont-7 {
        color: #bf8b39;
      }
    }
  }
</style>
